import { Component, OnInit } from '@angular/core';
import { OrderService } from '@app/services/order/order.service';
import { Router } from '@angular/router';
import { storage } from '@app/utils';
import { tableId } from '@app/config';

@Component({
  selector: 'app-editpeopleinfo',
  templateUrl: './editpeopleinfo.component.html',
  styleUrls: ['./editpeopleinfo.component.scss']
})
export class EditpeopleinfoComponent implements OnInit {
  userlist: string[] = [];
  tableId: string = '';
  personNum: string = '';
  personNumInt: number = 0;
  remark: string = '';
  remarkList: string[] = ['打包带走', '不要放辣椒', '微辣'];

  constructor (
    private readonly router: Router,
    private readonly orderService: OrderService,
  ) {
    for (let i = 1; i <= 12; i++) {
      this.userlist.push(`${i}人`);
    }
    this.tableId = storage.getItem(tableId);
  }

  ngOnInit() {
    this.initOrderInfo(this.tableId);
  }
  // dom操作
  ngAfterViewInit() {
    const that = this;
    // 选择人数的dom操作
    const lisDom: any = document.querySelectorAll('.user_list li');
    for (let i = 0; i < lisDom.length; i++) {
      lisDom[i].onclick = function () {
        for (let j = 0; j < lisDom.length; j++) {
          lisDom[j].className = '';
        }
        this.className = 'active';
        that.personNum = this.querySelector('span').innerHTML.trim();
      }
    }
    // 选择口味的dom操作
    const markLisDom: any = document.querySelectorAll('.mark_list li');
    for (let i = 0; i < markLisDom.length; i++) {
      markLisDom[i].onclick = function () {
        that.remark = '';
        for (let j = 0; j < markLisDom.length; j++) {
          markLisDom[j].className = '';
        }
        this.className = 'active';
        that.remark = this.querySelector('span').innerHTML.trim()
      }
    }
  }
  // 获取订单信息
  initOrderInfo(tableId: string): void {
    this.orderService.orderInfo$(tableId).subscribe(data => {
      const { code, message, result } = data;
      if (Object.is(code, 0)) {
        this.remark = result.remark;
        this.personNum = result.personNum;
        this.personNumInt = Number.parseInt(result.personNum);
      }
    })
  }

  // 确定修改
  comfirmModify(): void {
    const postData = {
      tableId: this.tableId,
      personNum: this.personNum,
      remark: this.remark,
    }
    this.orderService.modifyOrderInfo$(postData).subscribe(data => {
      const { code, message, result } = data;
      if (Object.is(code, 0)) {
        this.router.navigate(['/cart']);
      }
    })
  }
  // 取消按钮
  cancel() {
    this.router.navigate(['/cart']);
  }
}
